<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>BLUEDOT -- JOIN US</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/animate.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/ry-ui.css" rel="stylesheet">

<body class="gray-bg" style="background-image: url(assets/img/bg.jpg)">
<div class="wrapper wrapper-content animated fadeIn" style="margin-top: 5%">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>JOIN US</h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-6">
                            <h4>填写您的信息</h4>
                            <form class="form-horizontal" id="form-join">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">学号：</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="id" autofocus="autofocus" class="form-control" required placeholder="请输入您的学号">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">姓名：</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="name" class="form-control" placeholder="请输入您的姓名">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">班级：</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" name="grade" required>
                                            <option></option>
                                            <option value="软件1901">软件1901</option>
                                            <option value="软件1902">软件1902</option>
                                            <option value="软件1903">软件1903</option>
                                            <option value="软件1904">软件1904</option>
                                            <option value="软件1905">软件1905（移动互联）</option>
                                            <option value="软件1906">软件1906（嵌入式）</option>
                                            <option value="软件1907">软件1907（大数据）</option>
                                            <option value="软件1908">软件1908（大数据）</option>
                                            <option value="软件1909">软件1909（软会）</option>
                                            <option value="软件1910">软件1910（软金）</option>
                                            <option value="软件1911">软件1911（软英）</option>
                                            <option value="软件1912">软件1912（软英）</option>
                                            <option value="软件1913">软件1913（软英）</option>
                                            <option value="物联1901">物联1901</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">QQ：</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="qq" class="form-control" placeholder="请输入您的QQ">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-12 col-sm-offset-2">
                                        <button type="submit" class="btn btn-primary">提交</button>
                                        <button type="reset" class="btn btn-danger">重置</button>
                                        <button onclick="javascript:history.back(-1);" class="btn btn-danger" type="button">返回</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-sm-6">
                            <h4>“五个一”目标</h4>
                            <ul class="sortable-list connectList agile-list ui-sortable">
                                <li class="info-element">
                                    一门开发语言
                                    <div class="agile-detail">
                                        要求蓝点工作室成员必须精通一门开发语言，现在要求的Java语言
                                    </div>
                                </li>
                                <li class="info-element">
                                    一门数据库
                                    <div class="agile-detail">
                                        目前蓝点工作室要求掌握的数据库就是MySQL
                                    </div>
                                </li>
                                <li class="warning-element">
                                    一门建模语言
                                    <div class="agile-detail">
                                        掌握UML统一建模语言
                                    </div>
                                </li>
                                <li class="danger-element">
                                    一个开发平台
                                    <div class="agile-detail">
                                        掌握J2EE开发环境的搭建及熟练的掌握其开发工具
                                    </div>
                                </li>
                                <li class="success-element">
                                    一万行代码
                                    <div class="agile-detail">
                                        工作室要求其成员在校期间代码量必须达到万这个数量级
                                    </div>
                                </li>

                            </ul>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <p class="footer text-center">Copyright © 2019. 蓝点工作室 All rights reserved.</p>

</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.validate.min.js"></script>
<script src="assets/js/messages_zh.min.js"></script>
<script src="assets/js/layer.min.js"></script>
<script src="assets/js/ry-ui.js"></script>
<script type="text/javascript" color="225,82,73" opacity='0.8' zIndex="99" count="60" src="https://cdn.bootcss.com/canvas-nest.js/2.0.4/canvas-nest.js">
</script>
<script>
		
	$(function() {

        let flag = true;
        let cetx = "//39.106.146.85:8080/";
        validateRule();
        //自动填充
        $("input[name='id']").change(function () {

            if (!flag){
                $.modal.alert("报名暂未开启，请联系管理员");
                return;
            }

            let id = this.value;

            if(id === "" || id === undefined || id == null){
                select('');
                return;
            }

            $.ajax({
                url:cetx+"user/"+id,
                type:"GET",
                dataType: "json",
                success : function (response) {
                    console.log(response);
                    if(response.code === 200){
                        return;
                    }
                    $("input[name='name']").val(response.extend.user.name);
                    select(response.extend.user.grade);
                }
            });
        });

        function select(grade){

            var grades = $('select[name="grade"]').find("option"); //获取select下拉框的所有值
            for (let i = 1; i < grades.length; i++) {
                if ($(grades[i]).val() == grade) {
                    $(grades[i]).attr("selected", "selected");
                }
            }
        }

        function validateRule() {
            var icon = "<i class='fa fa-times-circle'></i> ";
            $("#form-join").validate({
                rules: {
                    id:{
                        required:true,
                        range:[20190000,20192186] //开放测试用，20191626,20192186
                    },
                    name: {
                        required: true,
                        minlength : 2,
                        isCharter: true
                    },
                    grade : {
                        required: true
                    },
                    qq : {
                        required:true,
                        isQQ : true
                    }
                },
                messages: {
                    id:{
                        range:"学号输入有误"
                    },
                    name: {
                        minlength : icon + "姓名至少为两位哦",
                        isCharter : icon + "名字格式不正确呢"
                    }
                },
                submitHandler: function() {

                    if (!flag){
                        $.modal.alert("报名暂未开启，请联系管理员");
                        return;
                    }

                    let data = $("#form-join").serialize();

                    $.ajax({
                        url: cetx+"join",
                        type:"POST",
                        data : data,
                        dataType: "json",
                        success : function (response) {
                            console.log(response);
                            $.modal.alert(response.extend.message);
                        }
                    });
                }
            })
        }

        jQuery.validator.addMethod("isQQ", function(value, element) {
            let qq = /[1-9][0-9]{4,}/;
            return this.optional(element) || (qq.test(value));
        }, "请正确填写您的QQ号");

        jQuery.validator.addMethod("isCharter", function(value, element) {
            let charter = /[\u4e00-\u9fa5]/;
            return this.optional(element) || (charter.test(value));
        }, "请正确填写您的姓名");
	});
</script>
</body>
</html>